<!--<meta charset="UTF-8">-->
<script>
    var title = "虚开发票分析"
</script>
<title>虚开发票分析</title>
<!--<div class="layui-fluid">-->
<style>
    /*.option {*/
    /*    !*color: #00FF00;*!*/
    /*    line-height: 30px;*/

    /*    height: 30px;*/

    /*    margin: 5px auto;*/
    /*}*/

</style>

<div class="layui-tab layui-tab-card" style="margin-top: 0;box-shadow:0 0 0 0">
    <ul class="layui-tab-title">
        <li class="layui-this" id="li-zjjy">虚开发票预测-专家经验模式</li>
        <li id="li-jqxx">虚开发票预测-机器学习模式</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="layui-row layui-col-space15">
                <div id="xk-table-zjjy" class="layui-col-md5" style="padding-right: 0">

                    <div class="layui-card">
                        <div style="display:none;position: absolute;right: 0; padding: 11px  0 0 12px;z-index: 1000;">
                            <span style="font-size: 13px">数据统计区间：</span>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="query-time"
                                       style="border: 0;width: 70px;height: 20px;background-color: transparent;
                                             margin: 0; padding: 0; color: #666 ;cursor:pointer"
                                >
                            </div>
                        </div>
                        <div class="layui-card-header layui-icon layui-icon-group" style="text-align: center">
                            虚开发票高风险企业
                        </div>
                        <div class="layui-card-body">
                            <table id="test-table-xk" lay-filter="test-table-xk" style="width: 100%"></table>
                            <script type="text/html" id="zizeng">
                                {{d.LAY_TABLE_INDEX+1}}
                            </script>
                        </div>

                    </div>
                </div>
                <div id="xk-chart-zjjy" class="layui-col-md7">
                    <div class="layui-card">
                        <!--                            <div id="xk-yhhx-1"-->
                        <!--                                 style=" width: 100%;display: block"></div>-->
                        <div style="position: absolute;padding: 12px 0 0 12px;z-index: 1000;cursor:pointer">
                            <i id="xk-tb-icon" class="layui-icon layui-icon-shrink-right"></i>
                        </div>
                        <div class="option"
                             style="display:none;position: absolute;padding:2px 0 0 0 ;right: 0;width: 215px;z-index: 1002">
                            <label class="layui-form-label"
                                   style="padding: 9px 0;width: 56%;font-size: 13px">当前闭环状态：</label>
                            <select id="status" lay-verify="" class="layui-input"
                                    style="width: 30%;border: 0;padding: 0 0 0 0; color: #666 ;cursor:pointer;font-size: 13px ">
                                <option style="color: #666 " value="01">税务发现</option>
                                <option style="color: #666 " value="02">税务检查</option>
                                <option style="color: #666 " value="03">税务报送</option>
                                <option style="color: #666 " value="04">稽查选案</option>
                                <option style="color: #666 " value="05">稽查检查</option>
                                <option style="color: #666 " value="06">稽查审理</option>
                                <option style="color: #666 " value="07">稽查送达</option>
                                <option style="color: #666 " value="08">稽查归档</option>
                                <option style="color: #666 " value="09">税务归档</option>
                            </select>
                        </div>


                        <div class="layui-card-header layui-icon layui-icon-link" style="text-align: center">
                            <span>虚开发票高风险企业详情</span>

                        </div>


                        <div class="layui-card-body ">
                            <div id="echats-title" style=" text-align:center;
                            width: 100%;
                            font-weight: bold;
                            /*padding-top: 50px;*/
                            font-size: 20px;
                            position: absolute;
                            z-index: 1000">

                                <span id="nsrxx-msg"></span>
                            </div>

                            <div id="xk-yhhx-1"
                                 style=" width: 100%;"></div>
                        </div>

                    </div>


                </div>
            </div>


        </div>
        <div class="layui-tab-item ">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md5" style="padding-right: 0">
                    <div class="layui-card">
                        <div class="layui-card-header layui-icon layui-icon-group" style="text-align: center">
                            虚开发票高风险企业名单
                        </div>
                        <div class="layui-card-body">
                            <table id="test-table-xk1" lay-filter="test-table-xk1"></table>
                            <script type="text/html" id="zizeng1">
                                {{d.LAY_TABLE_INDEX+1}}
                            </script>
                        </div>

                    </div>
                </div>
                <div class="layui-col-md7">
                    <div class="layui-card">


                        <!--                            <div id="xk-yhhx-1"-->
                        <!--                                 style=" width: 100%;display: block"></div>-->
                        <div class="layui-card-header layui-icon layui-icon-link" style="text-align: center">
                            虚开发票高风险企业详情

                        </div>
                        <div class="layui-card-body ">
                            <div id="echats-title1" style=" text-align:center;
                            width: 100%;
                            font-weight: bold;
                            /*padding-top: 50px;*/
                            font-size: 20px;
                            position: absolute;
                            color: #ffffff;
                            z-index: 1000">
                                <span id="nsrxx-msg1"></span>
                            </div>
                            <div id="xk-yhhx-11"
                                 style=" width: 100%;"></div>

                        </div>


                    </div>


                </div>
            </div>
        </div>
    </div>

</div>


<script>
    let statusObl = { // todo 数据库变动,此处需要重新改代码(有没有必要动态查询)
        '01': "税务发现",
        '02': "税务检查",
        '03': "税务报送",
        '04': "稽查选案",
        '05': "稽查检查",
        '06': "稽查审理",
        '07': "稽查送达",
        '08': "稽查归档",
        '09': "税务归档"
    }

    let selectTime = getCurrentMonth()
    selectTime = '202012'

    function changeStatus() {
        $("#status").css("display", '')
    }

    // sql查询
    function search(obj) {
        // 获取虚开数据
        let dataArr = [];
        $.ajax({
            url: layui.setter.hostAddr + `/portal/sql/select`,
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(obj),
            async: false,
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("Authorization", layui.data('layuiAdmin').Authorization);
            },
            type: 'POST',
            success: function (res) {
                dataArr = res.data
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                //通常情况下textStatus和errorThrown只有其中一个包含信息
                console.log(textStatus);   //调用本次ajax请求时传递的options参数
                console.log(errorThrown);   //调用本次ajax请求时传递的options参数
                doFail()
            }

        })
        return dataArr
    }

    let sqlobj = {
        "sql": `select  DISTINCT on (nsrsbh,nsrmc) nsrsbh,nsrmc, cast(djxh as varchar) djxh
            from xcdw_app.app_xkyc_fxnsrtzz where ssyf between '${selectTime}' and  '${selectTime}'  `,
        "keyword": ""
    }
    let machinesqlobj = {
        "sql": `select DISTINCT
                on (nsrsbh,nsrmc) nsrsbh,nsrmc, cast (djxh as varchar) djxh,ycgl,text
                from xcdw_app.app_xkyc_nsrtzxx_ycjg
                where ssyf between '202005' and '202006'  `,
        "keyword": ""
    }
    let tableData = search(sqlobj)
    let machineData = search(machinesqlobj)

    let allTzObj = search({
        "sql": `select *
                from xcdw_dim.dim_nsrfxtzz`,
        "keyword": ""
    })

    var fxtzObj, currentNsr, djxh, djxhMachine;

    let echarts = layui.echarts;
    // 指定图表的配置项和数据

    let color = [
        // '#00ffff',
        // '#00cfff',
        // '#1abc9c',
        // '#006ced',
        // '#9b59b6',
        // '#3498db',
        // '#ffe000',
        // '#ffa800',
        // '#ff5b00',
        '#2b8a3e',
        '#c92a2a',
        // '#ff3000'
    ]

    layui.use(['admin', 'table', 'echarts', 'imgBase64', 'laydate'], function () {
        var table = layui.table;
        var admin = layui.admin;
        var view = layui.view;
        var echarts = layui.echarts,
            $ = layui.jquery,
            laydate = layui.laydate,
            imgBase64 = layui.imgBase64;
        let inputJq = $('#query-time')
        inputJq.attr('value', selectTime.slice(0, 4) + '-' + selectTime.slice(4, 6))
        inputJq.on('focus', function () {
            let timeObj = {
                dateFmt: 'yyyy-MM',
                readOnly: true,
                isShowClear: false,
                onpicked: function (dp) {
                    dateonpicked(dp)
                },
            }
            WdatePicker(timeObj)
        })

        function dateonpicked(dp) {
            let selectYear = dp.cal.date.y + '',
                selectMonth = dp.cal.date.M + '';
            if (selectMonth.length < 2) {
                selectMonth = '0' + selectMonth
            }
            selectTime = selectYear + selectMonth
            sqlobj = {
                "sql": `select  DISTINCT on (nsrsbh,nsrmc) nsrsbh,nsrmc, cast(djxh as varchar) djxh
                from xcdw_app.app_xkyc_fxnsrtzz where ssyf between '${selectTime}' and  '${selectTime}'  `,
                "keyword": ""
            }
            tableData = search(sqlobj)
            tableRender()
            // 主动触发首次进入事件
            setTimeout(
                function () {
                    $('tr:eq(1) td:eq(1)').click()
                }, 10
            )

        }

        tableRender()

        function tableRender() {
            // 表格渲染
            debugger
            // 专家模式
            table.render({
                elem: '#test-table-xk'
                , data: tableData
                , page: true
                // ,cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    {
                        field: 'zizeng',
                        width: 60,
                        title: '序号',
                        event: 'setnsrsbh',
                        type: 'numbers',
                        fixed: 'left',
                        templet: '#zizeng'
                    }
                    , {field: 'nsrsbh', width: 155, title: '纳税人识别号', event: 'setnsrsbh', style: 'cursor: pointer;'}
                    , {field: 'nsrmc',width: 300, event: 'setnsrsbh', title: '纳税人名称'}
                    , {field: 'djxh', event: 'setnsrsbh', title: '登记序号', hide: true}
                ]]
                , height: 'full-280'
                , limit: 20
            });
            //机器学习
            table.render({
                elem: '#test-table-xk1'
                , data: machineData
                , page: true
                // ,cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    {
                        field: 'zizeng1',
                        width: 60,
                        title: '序号',
                        event: 'setnsrsbhmachine',
                        type: 'numbers',
                        fixed: 'left',
                        templet: '#zizeng1'
                    }
                    , {
                        field: 'nsrsbh',
                        width: 155,
                        title: '纳税人识别号',
                        event: 'setnsrsbhmachine',
                        style: 'cursor: pointer;'
                    }
                    , {field: 'nsrmc', width: 300, event: 'setnsrsbhmachine', title: '纳税人名称'}
                    , {field: 'djxh', event: 'setnsrsbhmachine', title: '登记序号', hide: true}
                    , {field: 'ycgl', event: 'setnsrsbhmachine', title: '预测概率', hide: true}
                    , {field: 'text', event: 'setnsrsbhmachine', title: '描述', hide: true}
                ]]
                , height: 'full-280'
                , limit: 20
            });
            //监听单元格事件
            table.reload('test-table-xk');
            table.reload('test-table-xk1');
            table.on('tool(test-table-xk1)', function (obj) {
                if (obj.event === 'setnsrsbhmachine') {
                    debugger;
                    let data = obj.data;
                    djxhMachine = data.djxh
                    buildEchartsMachine(data)
                }
            });
            table.on('tool(test-table-xk)', function (obj) {
                debugger
                $("#status").each(function () {
                    $(this).find("option").each(function () {
                        if ($(this).attr("selected")) {
                            //移除selected属性
                            $(this).prop("selected", false);
                        }
                    });
                });
                let data = obj.data;
                djxh = data.djxh
                let elementsLis = []
                let nsrzt, nsrztmc
                if (obj.event === 'setnsrsbh') {
                    var nsrobj = {
                        'sql': `SELECT DISTINCT
                                ( A.fxtzznrms ),
                                a.ssyf ssyf,
                                cast(a.djxh as varchar) djxh,
                                a.nsrsbh nsrsbh,
                                a.nsrmc nsrmc,
                                a.zt_dm zt_a,
                                c.zt_dm zt_c,
                                b.tzz_mc,
                                b.tzz_dm
                            FROM
                                xcdw_app.app_xkyc_fxnsrtzz A
                                LEFT JOIN xcdw_dim.dim_nsrfxtzz b ON A.tzz_dm = b.tzz_dm
                                left join xcdw_app.app_xkyc_fxnsrtzz_jg c on a.ssyf=c.ssyf and a.djxh=c.djxh and a.nsrsbh=c.nsrsbh
                            WHERE
                                a.ssyf BETWEEN '${selectTime}'
                                AND '${selectTime}'
                                AND a.djxh = '${data.djxh}'`,
                        "keyword": ""
                    }
                    console.log(nsrobj.sql)

                    currentNsr = data.nsrmc
                    fxtzObj = search(nsrobj)
                    // 渲染当前纳税人状态
                    nsrzt = fxtzObj[0]['zt_c'] === undefined ? fxtzObj[0]['zt_a'] : fxtzObj[0]['zt_c']
                    nsrztmc = statusObl[nsrzt]


                    $("#status option").each(function () {
                        if ($(this).text() === nsrztmc) {
                            $(this).prop("selected", true);
                        }
                    })
                    // 更新纳税人状态 监听状态变化
                    $("#status").change(function () {
                        var zt_dm = $(this).children('option:selected').val();
                        var updateObj = {
                            SSYF: fxtzObj[0]['ssyf'],
                            DJXH: fxtzObj[0]['djxh'],
                            NSRSBH: fxtzObj[0]['nsrsbh'],
                            NSRMC: fxtzObj[0]['nsrmc'],
                            ZT_DM: zt_dm,
                        }

                        layer.confirm('确定变更纳税人状态吗？', function (index) {
                            console.log(JSON.stringify(updateObj))
                            //执行 Ajax 后重载
                            $.ajax({
                                url: layui.setter.hostAddr + "/portal/xkyc/updateZtdm",
                                dataType: 'json',
                                data: JSON.stringify(updateObj),
                                async: false,
                                contentType: 'application/json',
                                beforeSend: function (XMLHttpRequest) {
                                    XMLHttpRequest.setRequestHeader("Authorization", layui.data('layuiAdmin').Authorization);
                                    XMLHttpRequest.setRequestHeader("Content-Type", "application/json");
                                },
                                type: 'PUT',
                                success: function (res) {
                                    // console.log("删除结果====" + JSON.stringify(res))
                                    doSuccess();
                                },
                                error: function (XMLHttpRequest, textStatus, errorThrown) {
                                    //通常情况下textStatus和errorThrown只有其中一个包含信息
                                    doFail();
                                    // console.log(textStatus);   //调用本次ajax请求时传递的options参数
                                    // console.log(errorThrown);   //调用本次ajax请求时传递的options参数
                                }

                            })
                            layer.close(index);
                        });


                    });
                    buildEcharts(fxtzObj)

                }

            });
            let titlrJq = $('#nsrxx-msg')
            titlrJq.on('click', function (obj) {
                let djxh_sql = {
                    "sql": `SELECT COALESCE
                                ( M.shxydm, M.nsrsbh ) nsrsbh,
                                M.nsrmc nsrmc,
                                h.HYMC hy_mc,
                                d.DJZCLXMC djzclx_mc,
                                j.JDXZMC jdxz_mc,
                                SY.SWRYXM ssgly_mc,
                                s.swjg_mc swjg_mc
                                FROM
                                XCDW_ODS.DJ_NSRXX
                                M LEFT JOIN xcdw_dim.dim_swjg s ON M.ZGSWSKFJ_DM = s.swjg_dm
                                LEFT JOIN XCDW_DIM.DIM_DJZCLX D ON M.DJZCLX_DM = D.DJZCLX_DM
                                LEFT JOIN XCDW_DIM.DIM_HY H ON M.HY_DM = H.HY_DM
                                LEFT JOIN XCDW_ODS.DM_GY_JDXZ J ON M.JDXZ_DM = J.JDXZ_DM
                                LEFT JOIN XCDW_ODS.DM_GY_SWRY SY ON M.SSGLY_DM = SY.SWRY_DM
                                WHERE
                                1 = 1
                                AND M.djxh = '${djxh}'`,
                    "keyword": ""
                }
                console.log(djxh_sql.sql)
                let nsrxx = search(djxh_sql)[0]
                let nsrxxDz = {
                    "ssgly_mc": "税收管理员",
                    "nsrsbh": "纳税人识别号",
                    "djzclx_mc": "登记注册类型",
                    "jdxz_mc": "街道乡镇名称",
                    "hy_mc": "行业名称",
                    "nsrmc": "纳税人名称",
                    "swjg_mc": "税务机关名称"
                }
                let nsrxxTemplet = `<div style="padding: 20px; line-height: 22px; color: #000; font-weight: 300;">`
                for (let key in nsrxx) {
                    nsrxxTemplet += `
                        <p> <b>${nsrxxDz[key]}</b>：${nsrxx[key]}</p>
                    `
                }
                nsrxxTemplet += '</div>'
                // console.log(JSON.stringify(nsrxx))
                // todo 弹出纳税人信息
                layer.open({
                    title: '纳税人信息'
                    , skin: 'layui-layer-lan'
                    , type: 1
                    , area: '400px'
                    , fixed: false //不固定
                    , maxmin: true
                    , offset: 'ct'
                    , id: 'nsr'
                    , content: nsrxxTemplet
                    , btn: '关闭'
                    , btnAlign: 'c'
                    , shade: 0.2
                    , yes: function () {
                        layer.closeAll();
                    }
                });
            })

            let titlrJq1 = $('#nsrxx-msg1')
            titlrJq1.on('click', function (obj) {
                let djxhMachine_sql = {
                    "sql": `SELECT COALESCE
                                ( M.shxydm, M.nsrsbh ) nsrsbh,
                                M.nsrmc nsrmc,
                                h.HYMC hy_mc,
                                d.DJZCLXMC djzclx_mc,
                                j.JDXZMC jdxz_mc,
                                SY.SWRYXM ssgly_mc,
                                s.swjg_mc swjg_mc
                                FROM
                                XCDW_ODS.DJ_NSRXX
                                M LEFT JOIN xcdw_dim.dim_swjg s ON M.ZGSWSKFJ_DM = s.swjg_dm
                                LEFT JOIN XCDW_DIM.DIM_DJZCLX D ON M.DJZCLX_DM = D.DJZCLX_DM
                                LEFT JOIN XCDW_DIM.DIM_HY H ON M.HY_DM = H.HY_DM
                                LEFT JOIN XCDW_ODS.DM_GY_JDXZ J ON M.JDXZ_DM = J.JDXZ_DM
                                LEFT JOIN XCDW_ODS.DM_GY_SWRY SY ON M.SSGLY_DM = SY.SWRY_DM
                                WHERE
                                1 = 1
                                AND M.djxh = '${djxhMachine}'`,
                    "keyword": ""
                }
                console.log(djxhMachine_sql.sql)
                let nsrxx = search(djxhMachine_sql)[0]
                let nsrxxDz = {
                    "ssgly_mc": "税收管理员",
                    "nsrsbh": "纳税人识别号",
                    "djzclx_mc": "登记注册类型",
                    "jdxz_mc": "街道乡镇名称",
                    "hy_mc": "行业名称",
                    "nsrmc": "纳税人名称",
                    "swjg_mc": "税务机关名称"
                }
                let nsrxxTemplet = `<div style="padding: 20px; line-height: 22px; color: #000; font-weight: 300;">`
                for (let key in nsrxx) {
                    nsrxxTemplet += `
                        <p> <b>${nsrxxDz[key]}</b>：${nsrxx[key]}</p>
                    `
                }
                nsrxxTemplet += '</div>'
                // console.log(JSON.stringify(nsrxx))
                // todo 弹出纳税人信息
                layer.open({
                    title: '纳税人信息'
                    , skin: 'layui-layer-lan'
                    , type: 1
                    , area: '400px'
                    , fixed: false //不固定
                    , maxmin: true
                    , offset: 'ct'
                    , id: 'nsr'
                    , content: nsrxxTemplet
                    , btn: '关闭'
                    , btnAlign: 'c'
                    , shade: 0.2
                    , yes: function () {
                        layer.closeAll();
                    }
                });
            })

        }

        // 隐藏左侧表格111
        $("#xk-tb-icon").on('click',
            function () {
                // alert(1)
                let iconJq = $("#xk-tb-icon"),
                    tableJq = $("#xk-table-zjjy"),
                    chartJq = $("#xk-chart-zjjy");
                // tableJq.slideToggle("fast");
                tableJq.toggle();
                let iconCls = iconJq.hasClass('layui-icon-shrink-right')
                if (iconCls) {
                    // 隐藏
                    iconJq.removeClass('layui-icon-shrink-right')
                    iconJq.addClass('layui-icon-spread-left')
                    chartJq.removeClass('layui-col-md7')
                    chartJq.addClass('layui-col-md12')
                } else {
                    // 显示
                    iconJq.removeClass('layui-icon-spread-left')
                    iconJq.addClass('layui-icon-shrink-right')
                    chartJq.removeClass('layui-col-md12')
                    chartJq.addClass('layui-col-md7')
                }
                var myEvent = new Event('resize');
                window.dispatchEvent(myEvent);
            })


        function setChartsHeight() {
            let layuiBodyHeight = $('div[lay-id="test-table-xk"]').height();
            // console.log(layuiBodyHeight)
            $('#xk-yhhx-1').css("height", layuiBodyHeight + 1 + 'px')
            $('#echats-title').css("padding-top", layuiBodyHeight / 25 + 'px')

        }

        function setChartsTitle() {
            let titlrJq = $('#nsrxx-msg')
            titlrJq.text(" " + currentNsr);
        }

        // 专家模式
        function buildEcharts(fxtzObj) {
            //设置标题
            setChartsTitle()
            //设置高度
            setChartsHeight();
            let myChart = echarts.init(document.getElementById('xk-yhhx-1'));
            myChart.clear()
            let dataArr = [];
            let haveTz = []
            let tzLis = []
            // console.log(fxtzObj)
            fxtzObj.forEach((item, index) => {
                if (haveTz.indexOf(item.tzz_dm) === -1) {
                    haveTz.push(item.tzz_dm)
                }
                if (tzLis.indexOf(item.tzz_mc) === -1) {
                    tzLis.push(item.tzz_mc)
                }
            })
            for (var i = 0; i < allTzObj.length; i++) {
                dataArr.push({
                    value: 921,
                    name: allTzObj[i].tzz_mc,
                    itemStyle: {
                        normal: {
                            color: haveTz.indexOf(allTzObj[i].tzz_dm) === -1 ? color[0] : color[1]
                        }
                    }
                })
            }
            let seriesOption = [{
                name: '',
                type: 'pie',
                clockWise: false,
                avoidLabelOverlap: true,
                radius: [105, 109],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'outside',
                            fontSize: 8,
                            rich: {
                                a: {
                                    fontSize: 12,
                                    //lineHeight: myFontSize,
                                }
                            },
                            formatter: '\n{a|{b}}\n',
                        },
                        labelLine: {
                            length: 30,
                            length2: 60,
                            show: true,
                            color: '#00ffff'
                        }
                    }
                },
                data: dataArr
            }];
            let option = {
                // backgroundColor: '#0A2E5D', // 背景颜色,白
                // title: {
                //     text: currentNsr,
                //     link: "http://baidu.com/",//点击标题内容要跳转的链接
                //     target: "blank",//跳转链接打开方式，blank是新窗口打开，self是自身窗口打开，跟a标签一样
                //     textStyle: {
                //         color: '#707071',
                //     },
                //     left: 'center',
                //     top: '5%'
                //     // color:'#ddd'
                // },
                color: color,
                graphic: {
                    elements: [{
                        type: "image",
                        z: 3,
                        style: {
                            image: imgBase64.img,
                            width: 178,
                            height: 178
                        },
                        left: 'center',
                        top: 'center',
                        position: [100, 100]
                    },
                        {
                            type: "image",
                            z: 4,
                            style: {
                                image: imgBase64.imgSrc,
                                width: 128,
                                height: 178
                            },
                            left: 'center',
                            top: 'center',
                            position: [100, 100]
                        }]
                },
                tooltip: {
                    show: false
                },
                toolbox: {
                    show: false
                },
                series: seriesOption
            }
            window.addEventListener("resize", function () {
                setTimeout(function () {
                    let tagTitle = $('#LAY_app_tabsheader li.layui-this span').text()
                    setChartsHeight()
                    setChartsMachineHeight()
                    if (tagTitle === title) {
                        myChart.resize();
                        myChartMachine.resize()
                    }
                }, 200)

            });

            myChart.setOption(option);

            myChart.off('click');
            myChart.on('click', function (params) {
                let fxtzDetail = "<div style=\"padding: 20px; line-height: 22px; color: #000; font-weight: 300;\">"
                let tzName = params.name;
                fxtzObj.forEach((item, index) => {
                    debugger
                    if (item.tzz_mc === tzName) {
                        fxtzDetail += `<p>${item.fxtzznrms}</p>`
                    }
                    if (index === fxtzObj.length - 1) {
                        fxtzDetail += `</div>`
                    }
                })
                debugger
                if (tzLis.indexOf(tzName) != -1) {
                    layer.open({
                        title: tzName
                        , skin: 'layui-layer-lan'
                        , type: 1
                        , area: '400px'
                        , fixed: false //不固定
                        , maxmin: true
                        , offset: 'ct'
                        , id: 'help'
                        , content: fxtzDetail
                        // , content: `<!--<p>你好<br/>世界</p>-->`
                        , btn: '关闭'
                        , btnAlign: 'c'
                        , shade: 0.2
                        , yes: function () {
                            layer.closeAll();
                        }
                    });
                }

            });
            $('#li-zjjy').on('click',function (){
                setTimeout(function (){
                                    myChart.resize()

                },100)
            })

        }

        // 模型预测可视化绘图
        let myChartMachine = echarts.init(document.getElementById('xk-yhhx-11'));
        let intervalTask, currentNsrXkMsgMachine;

        function setChartsMachineHeight() {
            let layuiBodyHeight = $('div[lay-id="test-table-xk1"]').height();
            $('#xk-yhhx-11').css("height", layuiBodyHeight + 1 + 'px')
            $('#echats-title1').css("padding-top", layuiBodyHeight / 20 + 'px')


        }

        function setChartsMachineTitle(nsrMsg) {
            let titlrJq = $('#nsrxx-msg1')
            titlrJq.css('color','#666')//
            titlrJq.text("" + nsrMsg);
        }

        let timerId; //不能移动变量位置
        // 生成图表
        function buildEchartsMachine(dataObj) {
            var a = Math.round(dataObj.ycgl * 100)

            function toPercent(point) {
                var str = Number(point * 100).toFixed(1);
                str += "%";
                return str;
            }

            if (intervalTask) {
                clearInterval(intervalTask)

            }
            setChartsMachineTitle(dataObj.nsrmc)
            // let angle = 0; //角度，用来做简单的动画效果的
            setChartsMachineHeight()
            // let myChart = echarts.init(document.getElementById('test'));

            let angle = 0; //角度，用来做简单的动画效果的
            let value = a;
            myChartMachine.clear()
            let option = {
                // backgroundColor: 'rgb(61,135,209)',
                title: [
                    {
                        text: '虚开概率',
                        x: 'center',
                        y: '42%',
                        itemGap: 200,
                        //subtext: '{f|' + dataObj.text ? dataObj.text.replaceAll('||', '\n') : '' + '}',
                        textStyle: {
                            // color: '#ffffff'
                            color: '#666'
                        },
                        subtextStyle: {
                            // color: '#ffffff',
                            color: '#666',
                            fontSize: 15
                        }

                    },
                    {
                        text: '{a|' + value + '}{c|%}',
                        left: '50%',
                        top: '50%',
                        textAlign: 'center',
                        textStyle: {
                            rich: {
                                a: {
                                    fontSize: 55,
                                    color: '#FF8E89'
                                },

                                c: {
                                    fontSize: 20,
                                    // color: '#ffffff',
                                    color: '#666',
                                    // padding: [5,0]
                                }
                            }
                        }
                    },
                ],

                series: [
                    {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function (params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                                    startAngle: (0 + angle) * Math.PI / 180,
                                    endAngle: (90 + angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: "#0CD3DB",
                                    fill: "transparent",
                                    lineWidth: 1.5
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },
                    {
                        name: "ring5", //紫点
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function (params, api) {
                            let x0 = api.getWidth() / 2;
                            let y0 = api.getHeight() / 2;
                            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;
                            let point = getCirlPoint(x0, y0, r, (90 + angle))
                            return {
                                type: 'circle',
                                shape: {
                                    cx: point.x,
                                    cy: point.y,
                                    r: 4
                                },
                                style: {
                                    stroke: "#0CD3DB", //绿
                                    fill: "#0CD3DB"
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },

                    {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function (params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                                    startAngle: (180 + angle) * Math.PI / 180,
                                    endAngle: (270 + angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: "#FF8E89",
                                    fill: "transparent",
                                    lineWidth: 1.5
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },
                    {
                        name: "ring5", // 蓝色
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function (params, api) {
                            let x0 = api.getWidth() / 2;
                            let y0 = api.getHeight() / 2;
                            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;
                            let point = getCirlPoint(x0, y0, r, (270 + angle))
                            return {
                                type: 'circle',
                                shape: {
                                    cx: point.x,
                                    cy: point.y,
                                    r: 4
                                },
                                style: {
                                    // stroke: "rgb(244,244,244)", //绿
                                    stroke: "#FF8E89", //绿
                                    // fill: "rgb(244,244,244)"
                                    fill: "#FF8E89"
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },

                    {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function (params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                                    startAngle: (270 + -angle) * Math.PI / 180,
                                    endAngle: (40 + -angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: "#0CD3DB",
                                    fill: "transparent",
                                    lineWidth: 1.5
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },
                    {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function (params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                                    startAngle: (90 + -angle) * Math.PI / 180,
                                    endAngle: (220 + -angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: "#FF8E89",
                                    fill: "transparent",
                                    lineWidth: 1.5
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },

                    {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function (params, api) {
                            let x0 = api.getWidth() / 2;
                            let y0 = api.getHeight() / 2;
                            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                            let point = getCirlPoint(x0, y0, r, (90 + -angle))
                            return {
                                type: 'circle',
                                shape: {
                                    cx: point.x,
                                    cy: point.y,
                                    r: 4
                                },
                                style: {
                                    stroke: "#FF8E89", //粉
                                    fill: "#FF8E89"
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },
                    {
                        name: "ring5", //绿点
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function (params, api) {
                            let x0 = api.getWidth() / 2;
                            let y0 = api.getHeight() / 2;
                            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                            let point = getCirlPoint(x0, y0, r, (270 + -angle))
                            return {
                                type: 'circle',
                                shape: {
                                    cx: point.x,
                                    cy: point.y,
                                    r: 4
                                },
                                style: {
                                    stroke: "#0CD3DB", //绿
                                    fill: "#0CD3DB"
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },

                    {
                        name: 'pie1',
                        type: 'pie',
                        radius: ['52%', '40%'],
                        // silent: false,
                        hoverAnimation: false,

                        clockwise: true,
                        startAngle: 90,
                        z: 4,
                        zlevel: 4,
                        label: {
                            normal: {
                                position: "center",
                            }
                        },
                        data: [{
                            value: value,
                            name: "",
                            itemStyle: {
                                normal: {
                                    color: { // 完成的圆环的颜色
                                        colorStops: [{
                                            offset: 0,
                                            color: '#FF8E89' // 0% 处的颜色
                                        },
                                            {
                                                offset: 0.3,
                                                color: '#FF8E89' // 0% 处的颜色
                                            },
                                            {
                                                offset: 0.6,
                                                color: '#FF8E89' // 0% 处的颜色
                                            },
                                            {
                                                offset: 0.8,
                                                color: '#FF8E89' // 100% 处的颜色
                                            }, {
                                                offset: 1,
                                                color: '#FF8E89' // 100% 处的颜色
                                            }
                                        ]
                                    },
                                }
                            }
                        },
                            {
                                value: 100 - value,
                                name: "",
                                label: {
                                    normal: {
                                        show: false
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: "#0CD3DB"
                                    }
                                }
                            }
                        ]
                    },
                    {
                        name: 'pie2',
                        type: 'pie',
                        radius: ['32%', '35%'],
                        silent: true,
                        clockwise: true,
                        startAngle: 270,
                        z: 0,
                        zlevel: 0,
                        label: {
                            normal: {
                                position: "center",

                            }
                        },
                        data: [{
                            value: value,
                            name: "",
                            itemStyle: {
                                normal: {
                                    color: { // 完成的圆环的颜色
                                        colorStops: [{
                                            offset: 0,
                                            color: 'yellow' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: 'yellow' // 100% 处的颜色
                                        }]
                                    },
                                }
                            }
                        },
                            {
                                value: 100 - value,
                                name: "",
                                label: {
                                    normal: {
                                        show: false
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: "yellow"
                                    }
                                }
                            }
                        ]
                    },

                ]
            };

            //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
            function getCirlPoint(x0, y0, r, angle) {
                let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
                let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
                return {
                    x: x1,
                    y: y1
                }
            }

            function draw() {
                angle = angle + 3
                myChartMachine.setOption(option, true)
                //window.requestAnimationFrame(draw);
            }

            if (timerId) {
                clearInterval(timerId);
            }
            timerId = setInterval(function () {
                //用setInterval做动画感觉有问题
                draw()
                // 绑定点击事件
            }, 100);
            myChartMachine.off('click');
            myChartMachine.on('click', 'series.pie', function (params) {
                if (params.dataIndex !== 0) {
                    return false
                }
                let fxtzDetail = "<div style=\"padding: 20px; line-height: 22px; color: #000; font-weight: 300;\">"
                fxtzDetail += `${dataObj.text ? dataObj.text.replaceAll('||', '<br>') : ''}</div>`
                debugger
                layer.open({
                    title: dataObj.nsrmc + '虚开特征'
                    , skin: 'layui-layer-lan'
                    , type: 1
                    , area: '400px'
                    , fixed: false //不固定
                    , maxmin: true
                    , offset: 'ct'
                    , id: 'help'
                    , content: fxtzDetail
                    // , content: `<!--<p>你好<br/>世界</p>-->`
                    , btn: '关闭'
                    , btnAlign: 'c'
                    , shade: 0.2
                    , yes: function () {
                        layer.closeAll();
                    }
                });


            });


            //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
            // myChartMachine.setOption(option)

            // intervalTask = setInterval(function () {
            //     //用setInterval做动画感觉有问题
            //     draw()
            // }, 100);


        }

        // li标签点击事件
        let clinkJqxx = false
        $('#li-jqxx').on('click', function () {
            setTimeout(
                function () {
                    if (clinkJqxx){
                        myChartMachine.resize()
                        return false
                    }
                    djxhMachine = machineData[0].djxh
                    buildEchartsMachine(machineData[0])
                    myChartMachine.resize()
                    clinkJqxx = true


                }, 500
            )

        })

        // 主动触发首次进入事件
        $('tr:eq(1) td:eq(1)').click()


    });


</script>




